﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>

    <section>
      <h2>正在进行/待办 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <!-- <li>
          <input type="checkbox" />
          <p>测试</p>
          <a href="javascript:;"></a>
        </li> -->
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <li>
          <input type="checkbox" />
          <p>吃饭</p>
          <a href="javascript:;"></a>
        </li>
      </ul>
    </section>

    <footer></footer>

    <script>
      let arr = JSON.parse(localStorage.getItem('data'))
        ? JSON.parse(localStorage.getItem('data'))
        : []
      let arr1 = JSON.parse(localStorage.getItem('donelist'))
        ? JSON.parse(localStorage.getItem('donelist'))
        : []
      document.querySelector('#todocount').innerHTML = arr.length
      document.querySelector('#donecount').innerHTML = arr1.length

      window.addEventListener('load', function () {
        JSON.parse(localStorage.getItem('data')) ||
        JSON.parse(localStorage.getItem('donelist'))
          ? renderList()
          : ''

        document
          .querySelector('[type="text"]')
          .addEventListener('keyup', function (e) {
            const input = document.querySelector('#title')
            if (e.keyCode === 13) {
              if (input.value.trim()) {
                arr.push(input.value)
                document.querySelector('#todocount').innerHTML = arr.length
                document.querySelector('#donecount').innerHTML = arr1.length
                localStorage.setItem('data', JSON.stringify(arr))
                renderList()
                input.value = ''
              }
            }
          })
      })

      function renderList() {
        const data = JSON.parse(localStorage.getItem('data'))
          .map((item) => {
            return `
              <li class="todo">
                <input type="checkbox" >
                <p>${item}</p>
                <a href="javascript:;" dataset-id="${item}"></a>
                </li>
                `
          })
          .join('')
        document.querySelector('#todolist').innerHTML = data

        const data1 = JSON.parse(localStorage.getItem('donelist'))?JSON.parse(localStorage.getItem('donelist')).map((item) => {
            return `
              <li class="done">
                <input type="checkbox" checked>
                <p>${item}</p>
                <a href="javascript:;" dataset-id="${item}"></a>
                </li>
                `
          })
          .join('') : ''
        document.querySelector('#donelist').innerHTML = data1

        document.querySelectorAll('ol li').forEach((item) => {
          item.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
              // console.log(item.innerText)
              let text = item.innerText
              arr.forEach((item, index) => {
                if (text == item) {
                  arr.splice(index, 1)
                }
              })
              document.querySelector('#todocount').innerHTML = arr.length
              document.querySelector('#donecount').innerHTML = arr1.length
              // console.log(arr);
              localStorage.setItem('data', JSON.stringify(arr))
              localStorage.setItem('donelist', JSON.stringify(arr1))
              renderList()
              alert('删除成功')
            }
          })
        })
        document.querySelectorAll('ol li').forEach((item) => {
          item.addEventListener('click', function (e) {
            if (
              item.classList.contains('todo') &&
              item.firstElementChild.checked
            ) {
              item.classList.remove('todo')
              item.classList.add('done')
              let text = item.innerText
              arr.forEach((item, index) => {
                if (text == item) {
                  arr.splice(index, 1)
                  arr1.push(item)
                }
              })
              document.querySelector('#todocount').innerHTML = arr.length
              document.querySelector('#donecount').innerHTML = arr1.length
              localStorage.setItem('data', JSON.stringify(arr))
              localStorage.setItem('donelist', JSON.stringify(arr1))
              document.querySelector('#donelist').appendChild(item)
              renderList()
            }
          })
        })
        

        document.querySelectorAll('ul li').forEach((item) => {
          item.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
              // console.log(item.innerText)
              let text = item.innerText
              arr1.forEach((item, index) => {
                if (text == item) {
                  arr1.splice(index, 1)
                }
              })
              document.querySelector('#todocount').innerHTML = arr.length
              document.querySelector('#donecount').innerHTML = arr1.length
              // console.log(arr);
              localStorage.setItem('donelist', JSON.stringify(arr1))
              renderList()
              alert('删除成功')
            }
          })
        })
        document.querySelectorAll('ul li').forEach((item) => {
          item.addEventListener('click', function (e) {
            if (
              item.classList.contains('done') &&
              !item.firstElementChild.checked
            ) {
              item.classList.remove('done')
              item.classList.add('todo')
              let text = item.innerText
              arr1.forEach((item, index) => {
                if (text == item) {
                  arr1.splice(index, 1)
                  arr.push(item)
                }
              })
              document.querySelector('#todocount').innerHTML = arr.length
              document.querySelector('#donecount').innerHTML = arr1.length
              localStorage.setItem('data', JSON.stringify(arr))
              localStorage.setItem('donelist', JSON.stringify(arr1))
              document.querySelector('#todolist').appendChild(item)
              renderList()
            }
          })
        })
      }
    </script>
  </body>
</html>
